<template>
    <div class="follow" ref="follow" @scroll="binScroll">
        <div class="top" ref="top">
            <div class="title">豆果美食，会做饭很酷~</div>
            <div>你关注人的动态会出现在这里</div>
            <div>为你推荐了一些有趣的人，快关注他们吧</div>
        </div>
        <div ref="span">
            <div class="item" v-for="(item,i) in data" :key="i">
                <div class="itop">
                    <div class="user">
                        <div class="userImg">
                            <img :src="item.u.p" alt="" @click="binuser(item.u.id)">
                        </div>
                        <div class="userInof">
                            <div class="userTop">
                                {{item.u.n}}&nbsp;&nbsp;<span class="userLv">LV.{{item.u.lvl}}</span>
                            </div>
                            <div class="userBottom">
                                {{item.u.followers_count_text}} · {{item.u.recipes_count_text}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="img">
                    <img :src="item.img" alt="" @click="bint1(item.item_id)">
                </div>
                <div class="bottom">
                    <div class="shouchang">
                        <div class="left">
                            <div :class="'img'+i" v-for="(src,i) in item.collect_users" :key="i">
                                <img :src="src.p" alt="">
                            </div>
                        </div>
                        <div class="right">{{item.collect_count_text}}</div>
                    </div>
                    <div class="title">{{item.n}}</div>
                    <div class="biaoqian" v-if="item.events!=undefined">
                        <span v-for="(title,index) in item.events" :key="index"># {{title.c}}</span>
                    </div>
                </div>
        </div>
        </div>
        
    </div>
</template>

<script>
    export default {
        name:'follow',
        data() {
            return {
                data:[],
                timer:0
            }
        },
        async created(){
            await this.axios.get('https://apis.netstart.cn/douguo/home/ffeeds/0/10'). then((response) => {
                if (response.data.state=== "success") {
                    this.data = response.data.result.rfs
                }
            })
        },
        methods:{
            binScroll(){
                let length = this.data.length
                clearTimeout(this.timer)
                this.timer = setTimeout(()=>{
                    if (this.$refs.top.scrollHeight+this.$refs.span.scrollHeight-this.$refs.follow.scrollTop===this.$refs.follow.clientHeight) {
                        this.axios.get(`https://apis.netstart.cn/douguo/home/ffeeds/${length}/10`). then((response) => {
                        this.data.push(...response.data.result.rfs) 
                        })
                    }
                },300)
            },
            bint1(id){
                this.$router.push({name:'type1',query:{id}})
            },
            binuser(id){
                this.$router.push({name:'user',query:{id}})
            }
        }
    }
</script>

<style lang="less" scoped>
    .follow{
        width: 100%;
        height: calc(100vh - 100px);
        overflow: auto;
    }
    .top{
        width: 100%;
        background-color: rgb(240, 240, 240);
        div{
            height: 25px;
            line-height: 25px;
            margin: 0 20px;
            font-size: 10px;
            color: rgb(98, 98, 98);
        }
        .title{
            height: 40px;
            line-height: 40px;
            margin: 0 20px;
            font-size: 16px;
            font-weight: 600;
            color: rgb(0, 0, 0);
        }
    }
    .item{
        padding-top: 10px;
        width: 100%;
        .itop{
            width: 100%;
            display: flex;
            margin: 10px 0;
            .user{
                width: 100%;
                display: flex;
                .userImg{
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-left: 10px;
                }
                .userInof{
                    height: 40px;
                    margin-left: 10px;
                    .userTop{
                        height: 20px;
                        font-size: 12px;
                        line-height: 20px;
                        .userLv{
                            color: #fbc959;
                        }
                    }
                    .userBottom{
                        line-height: 20px;
                        height: 20px;
                        color: rgb(117, 117, 117);
                    }
                }
            }
        }
        .img{
                width: 100%;
                position: relative;
                .learned_count_text{
                    position: absolute;
                    color: white;
                    padding: 10px;
                    bottom: 0;
                    left: 0;
                }
            }
    }
    img{
        width: 100%;
    }
    .bottom{
        padding: 10px;
        .title{
            width: 100%;
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .biaoqian{
            span{
                color: #50969F;
                font-weight: 800;
                margin-right: 10px;
            }
        }
        .shouchang{
            margin-bottom: 10px;
            display: flex;
            .left{
                display: flex;
                margin-right: 10px;
                .img0{
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    overflow: hidden;
                }
                .img1{
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    overflow: hidden;
                }
                .img2{
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    overflow: hidden;
                }
                .img3{
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    overflow: hidden;
                }
            }
        }
    }
</style>